No digo que sea una novedad ni espectacular pero es un menú muy sencillo, tan sencillo que lo vamos a añadir todo en un gadget de HTML y ahí ya tenemos marcadas las partes que podemos cambiar.
Para los enlaces hacemos como siempre, sustituimos "url-enlace" por la url de nuestro enlace y en "Enlace 1-2-3-4-5-6" por nuestro texto que hará de enlace.
<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* puede ser "left", "right" o "center" */
font: bold 18px Georgia; /* tamaño de fuente */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* espacio entre enlaces */
}
ul.arrowunderline li a{ /* el color de texto es black */
position:relative;
color:black;
padding-bottom:8px; /* espacio entre la flecha y el texto */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosor línea de la flecha el color es red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* el color de la flecha es red */
}
</style>
<ul class="arrowunderline">
<li><a href="url-enlace">Enlace 1</a></li>
<li><a href="url-enlace">Enlace 2</a></li>
<li class="selected"><a href="url-enlace">Enlace 3</a></li>
<li><a href="url-enlace">Enlace 4</a></li>
<li><a href="url-enlace">Enlace 5</a></li>
<li><a href="url-enlace">Enlace 6</a></li>
</ul>
Gracias, Gem@, no sabés lo justito que me ha venido ésto, casi como caído del cielo. Sencillo pero muy práctico, de verdad. Gracias! :) http://elpatiodelashortensias.blogspot.com/
:: Pues que bien que me digas eso Enrique :)
Gema, tengo un problemilla y por más que he buscado no he podido dar con la solución. Resulta que tengo un blog en donde los enlaces se abren siempre en una ventana nueva. En particular en ese blog no quiero que la cosa funcione así, quiero que los enlaces se abran en la misma ventana del blog. Como te digo, no he dado con la solución, si puedes ayudarme sería estupendo. Gracias!
Antes que me digas nada, Gem@, ya lo conseguí. Era bastante complicado porque se trata de una plantilla adaptada, en fin, pero como te digo ya encontré la solución después de muuuucho sudar, ja. Así que bueno, listo.
:: Estupendo Enrique seguramente era un script que los abre todos en ventana nueva :)
gema, en algun momento quité la navar de mi blog. hay alguna forma de poner un menú como este en su lugar??
gracias
:: EpideMia lo puedes hacer de dos formas una y las más sencilla es añadirlo directamente a la plantilla justo antes del header, es decir añadir lo mismo que lo haríamos en un gadget de html.
(Siempre que trabajamos directamente en la plantilla hay que estar seguros de tener copia de respaldo)
Y la otra es crear una sección si es que no la tienes para añadir gadgets justo antes también del header.
Hola!
Y como hago para centrarlo?
Gracias
:: Debería quedar centrado Robophobia ¿se puede ver el ejemplo en algún sitio?
Hola Gem@ :D, acabo de poner éste menú en mi blog, ahora lo estoy tuneando un poquito, le he puesto sombras (truco que te copié a ti en su día)y quería ver si puedo poner la primera letra más grande que el resto, al igual que tengo en otras partes del blog pero, de momento, no hay manera, jejejeje
Me gusta mucho el diseño sencillo pero, elegante,y, además, muy fácil de poner en el blog, miles de gracias
Una pregunta, al estar puesto en un gadget ¿no ralentiza la carga del blog un poco?, es que estoy eliminando algunas cosas del blog para que tarde menos en cargar, ya he conseguido rebajar un poco el tiempo de carga y, aún me quedan cosas por quitar, por eso te lo preguntaba
Pues, dicho ésto, gracias de nuevo por todas las ideas que nos das, da gusto darse un paseo por tu blog y encontrar tantas cosas interesantes. :)
gracias nuevamente por la info, en mi sitio de juegos de chicas lo pondré en la sección de blog
Nota: solo los miembros de este blog pueden publicar comentarios.